<template>
<!-- 这里不设置id 因为顶部导航栏有很多地方要引用 -->
 <div class="nav-bar">
     <div class="nav-bar-left">
          <slot name="left"></slot>
     </div>
     <div class="nav-bar-center">
          <slot name="center"></slot>
     </div>
     <div class="nav-bar-right">
          <slot name="right"></slot>
     </div>
 </div>

</template>

<script>

export default({
    name:'NavBar',

})

</script>

<style scoped>
    /*  css讲解 line-height 需要内容来填充，不然高度为0  */
    .nav-bar{
        height: 44px;
        display:flex;
        line-height: 44px; /* 一般导航栏的高度是44px */
        /* 如果有状态栏的时候 20px    */
        text-align: center;
        box-shadow: 0 1px 1px rgba(100, 100, 100, 0.1);

        /* 这里是公共的组件不建议设置背景，在自己的界面去设置 */
    }

    /*  css讲解 这里要用,隔开 不然没有样式  */
    .nav-bar-left , .nav-bar-right{
        width: 60px;
       /*  background-color: blue; */
    }

    .nav-bar-center{
       /*  background-color:red; */
        flex: 1;
    }

</style>
